<template>
  <div class="filterPage">
    <div class="outer">
      <header class="header" @touchmove.stop.prevent>
        <ul class="tab-tilte">
          <li :class="{ active: tab == 0 }" @click="currentTab = 0">
            <div class="left" @click="hide()">
              <svg
                class="icon"
                width="20px"
                height="20px"
                viewBox="0 0 20 20"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <title>{{ $lang.filter }}</title>
                <g
                  id="TT移动端邮箱-视觉"
                  stroke="none"
                  stroke-width="1"
                  fill="none"
                  fill-rule="evenodd"
                >
                  <g
                    id="3.1-收件箱-弹出筛选和管理"
                    transform="translate(-68.000000, -76.000000)"
                  >
                    <g id="编组-2" transform="translate(0.000000, 64.000000)">
                      <g id="筛选" transform="translate(68.000000, 12.000000)">
                        <rect
                          id="矩形"
                          x="0"
                          y="0"
                          width="20"
                          height="20"
                        ></rect>
                        <g
                          id="编组-4"
                          transform="translate(2.916667, 4.583333)"
                          :stroke="[
                            c_selectedOption.length > 0 &&
                            c_selectedOption !== $lang.all
                              ? '#00c00e'
                              : '#646566',
                          ]"
                          stroke-width="1.25"
                        >
                          <path
                            d="M3.86904762,12.0833333 L3.86904762,5.41666667 L0.0941213211,0.131769849 C0.0673705719,0.0943188006 0.0760448786,0.0422729599 0.113495928,0.0155222107 C0.127629324,0.00542692786 0.144563862,1.55846223e-16 0.161932444,0 L10.6714009,0 C10.7174246,-1.77093347e-15 10.7547342,0.0373096042 10.7547342,0.0833333333 C10.7547342,0.100701915 10.7493073,0.117636453 10.739212,0.131769849 L6.96428571,5.41666667 L6.96428571,5.41666667 L6.96428571,13.3333333"
                            id="路径-18"
                          ></path>
                          <line
                            x1="10.4166667"
                            y1="5"
                            x2="14.5833333"
                            y2="5"
                            id="路径-19"
                          ></line>
                          <line
                            x1="10.4166667"
                            y1="7.5"
                            x2="14.5833333"
                            y2="7.5"
                            id="路径-19备份"
                          ></line>
                          <line
                            x1="10.4166667"
                            y1="10"
                            x2="14.5833333"
                            y2="10"
                            id="路径-19备份-2"
                          ></line>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
              <!-- <img
                :class="['icon', c_selectedOption.length > 0 ? 'activeIcon' : '']"
                :src="require('@/assets/oppo/home/filter.svg')"
                alt=""
              /> -->
              <span
                :class="
                  c_selectedOption.length > 0 && c_selectedOption !== $lang.all
                    ? 'activeFilter'
                    : ''
                "
                >{{
                  c_selectedOption.length > 0 && c_selectedOption !== $lang.all
                    ? c_selectedOption
                    : $lang.filter
                }}</span
              >
            </div>
          </li>
          <li :class="{ active: tab == 1 }" @click="currentTab = 1">
            <img
              class="icon"
              :src="require('@/assets/oppo/home/manage.svg')"
              alt=""
            />
            <span @click="triggerManage">{{ $lang.emailManage }}</span>
          </li>
        </ul>
      </header>

      <div
        class="tab-content"
        v-if="!hideFilterContent"
        @touchmove.stop.prevent
      >
        <div>
          <ul
            v-for="(item, index) in selectList"
            :key="index"
            class="list-container"
          >
            <li @click="tickCurrentOption(index)">
              {{ item.option }}

              <div
                class="tick-wrapper"
                v-show="c_selectedOption === item.option"
              >
                <!-- <div class="tick-icon"></div> -->
                <img :src="require('@/assets/oppo/home/tick.svg')" alt="" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div
      class="masking"
      v-show="!hideFilterContent"
      @click="hide"
      @touchmove.stop.prevent
    ></div>
  </div>
</template>

<script>
export default {
  name: "FilterManageTab",
  props: {
    optionList: {
      type: Array,
    },
    selectedOption: {
      type: String,
    },
    hideFilterContent_Prop: {
      type: Boolean,
    },
  },
  watch: {
    currentTab(newV) {
      if (newV == 1) {
        this.$emit("hideFilterManage");
      }
    },
    hideFilterContent_Prop(newV) {
      if (newV == true) {
        this.hideFilterContent = true;
      }
    },
  },
  data() {
    return {
      tab: "0",
      selectList: [],
      showTick: false,
      currentTab: -1,
      hideFilterContent: true,
      destroyTab: false,
    };
  },
  computed: {
    c_selectedOption: {
      get() {
        return this.selectedOption;
      },
      set(val) {
        this.$emit("filterOption", val);
      },
    },
  },
  methods: {
    tickCurrentOption(index) {
      console.warn("查看当前index",index);
      this.c_selectedOption = this.selectList[index].option;
      setTimeout(() => {
        this.hideFilterContent = true;
      }, 400);
    },
    hide() {
      this.hideFilterContent = !this.hideFilterContent;
    },
    triggerManage() {
      this.$emit("triggerManage");
    },
  },
  created() {
    this.selectList = this.optionList;
  },
};
</script>

<style lang="less" scoped>
.filterPage {
  width: 100%;
  position: relative;
  .masking {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    z-index: 1;
    opacity: 0.5;
  }
  .outer {
    width: 100%;
    height: 100%;
    background: #fff;
    .header {
      height: 44px;
      width: 100%;
      .tab-tilte {
        height: 100%;
        display: flex;
        align-items: center;
        li {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50%;
          font-size: 14px;

          color: #646566;

          text-align: center;
          span {
            display: block;
          }
          .activeFilter {
            color: #00c00e;
          }
          .icon {
            margin-right: 6px;
            pointer-events: none;
          }
          .activeIcon {
            fill: #00c00e !important;
          }
          .left {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            border-right: 1px inset #eeeeee;
          }
        }

        // li::before{  //难搞 不搞了
        //   content: '';
        //   display: block;
        //   height: 20px;
        //   width: 20px;
        //   // background-image无法引用本地资源，故需要用网络地址
        //   background-image: url('../assets/oppo/home/filter.svg');
        //   background-size: 100% 100%;

        // }
      }
    }

    .tab-content {
      padding: 0px 16px;
      width: 100%;
      height: 224px;

      .list-container {
        li {
          height: 56px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          color: #323233;
          text-align: left;
          line-height: 16px;
          font-weight: 400;

          // .tick-wrapper {
          //   //自己画了个勾勾
          //   overflow: hidden;
          //   width: 20px;
          //   height: 20px;
          //   position: relative;
          //   // border: 1px solid red;
          //   .tick-icon {
          //     position: absolute;
          //     top: -15px;
          //     left: -6px;
          //     width: 24px;
          //     height: 24px;

          //     transform: rotate(-50deg);
          //     border: 1px solid #06cb44;
          //   }
          // }
        }
      }
    }
  }
}
ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active {
  color: #00c00e;
}
</style>
